@font-face {
    font-family: 'fs-light';
    src        : url("../fonts/仿宋细.TTF");
}

@font-face {
    font-family: 'fs-weight';
    src        : url("../fonts/仿宋粗.ttf");
}

/* 多边形旋转 */
@keyframes shapRound {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    3% {
        opacity  : 1;
        transform: scale(1) rotate(480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(1000deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(2100deg);
    }
}

/* 多边形旋转2 */
@keyframes shapRound1 {
    0% {
        opacity  : 0;
        transform: scale(0) rotate(0deg);
    }

    6% {
        opacity  : 1;
        transform: scale(1) rotate(-480deg);
    }

    90% {
        opacity      : 0.8;
        transform    : scale(1.5) rotate(-1300deg);
        border-radius: 0px;
        border-width : 1px;
    }

    100% {
        opacity      : 0;
        border-radius: 1000px;
        border-width : 5px;
        transform    : scale(6) rotate(-2100deg);
    }
}

body {
    background-color   : #ffeb99;
    font-weight        : 400;
    font-size          : 20px;
    // background-image: url('../img/icon/icons8-剑-100.png');
}

.container {
    width  : 90%;
    padding: 0;
}

Font {
    // font
    line-height    : 1.5em;
    letter-spacing : 1.2em;
    text-indent    : 2em;
    text-shadow    : 5px 5px 10px red;
    text-decoration: none;
    cursor         : pointer;
}

//所有的箭头小图片
.arror {
    width  : 2.8rem;
    z-index: 100;
}

.header_s {
    height    : 12rem;
    text-align: center;

    ul {
        float: left;
        width: 100%;

        li {
            float : left;
            height: 5.333333rem;

            a {
                font-size: 1.8rem;
            }

            img {
                width    : 100%;
                // height: 100%;
            }
        }

        li:nth-child(n+2) {
            position   : relative;
            width      : 21.5%;
            line-height: 5.333333rem;
            text-align : center;
            top        : 6.8rem;

            a {
                color   : #000;
                position: relative;

                &:hover {
                    text-decoration: none;

                    .shapeHover {
                        animation: shapRound 10s;
                    }

                    .shapeHover1 {
                        animation: shapRound1 10s;
                    }
                }

                .shapeHover {
                    @large     : 50px;
                    width      : @large;
                    height     : @large;
                    position   : absolute;
                    left       : 50%;
                    top        : 50%;
                    margin-left: -25px;
                    margin-top : -25px;
                    border     : solid 1px black;
                    opacity    : 0;
                }

                .shapeHover1 {
                    @large     : 40px;
                    width      : @large;
                    height     : @large;
                    position   : absolute;
                    left       : 50%;
                    top        : 50%;
                    margin-left: -20px;
                    margin-top : -20px;
                    border     : solid 1px black;
                    opacity    : 0;
                }
            }

            &:hover {
                width        : 21.5%;
                border-radius: 10px;

            }
        }
    }
}

.big {
    width : 80%;
    margin: 0 auto;

    p {
        font-family: 'fs-weight';
        font-size  : 2.25rem;
    }

    .line {
        height: 11.1111111111%;
        width : 100%;

        .box {
            width           : 25%;
            height          : 20vw;
            padding         : 20px;
            float           : left;
            outline         : solid 2.5px gray;
            background-color: #fff;



        }

        .text-box {
            transition: all 0.2s;

            &:hover {
                transform : scale(1.03);
                box-shadow: 5px 5px 10px rgba(128, 128, 128, 0.568);
                z-index   : 50;
            }
        }
    }

    .line:nth-child(1) {
        .box:nth-child(1) {
            p {
                .arror {
                    transform: rotate(90deg);
                }
            }
        }

        .box:nth-child(2) {
            font-weight: 600;
            font-size  : 60px;
            position   : relative;
            height     : 19.95vw;

            p {
                position      : absolute;
                font-family   : 'msyh';
                font-size     : 6rem;
                bottom        : 0;
                left          : 20px;
                letter-spacing: 0.15em;
                text-shadow   : 2px 2px 3px #ffeb99;
            }
        }

        .box:nth-child(4) {
            input {
                // margin-left: 20px;
                // margin-top: 20px;
                font-size    : 1.6rem;
                height       : 3.5rem;
                width        : 60%;
                padding-left : 10px;
                border-radius: 15px;
                outline      : none;
                border       : 4px solid rgba(128, 128, 128, 0.445);
            }

            a {
                img {
                    width      : 2.6rem;
                    margin-left: 1rem;
                }
            }
        }

    }

    .line:nth-child(2) {

        .box:nth-child(1) {
            position: relative;
            width   : 24.95%;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }

            img {
                position : absolute;
                right    : -19px;
                bottom   : 85px;
                transform: rotate(-90deg);
            }
        }

        .box:nth-child(2) {
            text-align: center;
            width     : 50.055%;

            img {

                width: 90%;
            }
        }



        .box:nth-child(3) {
            position: relative;

            width: 24.995%;

            p:nth-child(2) {
                position: absolute;
                // 
                right   : 20px;
                bottom  : 20px;
            }
        }

    }

    .line:nth-child(3) {
        .box:nth-child(1) {
            width   : 50%;
            position: relative;

            img:nth-child(1) {
                width      : 90%;
                margin-top : 14px;
                margin-left: 27px;
            }

            img:nth-child(2) {
                position : absolute;
                right    : -18px;
                bottom   : 40px;
                z-index  : 5;
                transform: rotate(90deg);
            }
        }

        .box:nth-child(2) {
            position: relative;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }
        }

        .box:nth-child(3) {
            position: relative;

            img:nth-child(1) {
                width      : 90%;
                margin-top : 17px;
                margin-left: 18px;
            }

            img:nth-child(2) {
                position: absolute;
                top     : -25px;
                left    : 35px;
            }
        }
    }

    .line:nth-child(4) {
        .box:nth-child(2) {
            position: relative;
            height  : 19.95vw;

            img:nth-child(1) {
                width      : 90%;
                margin-top : 17px;
                margin-left: 18px;
            }

            img:nth-child(2) {
                position    : absolute;
                bottom      : 22px;
                right       : -20px;
                transform   : rotate(90deg);
                // outline  : solid 10px;
                z-index     : 200;
            }
        }

        .box:nth-child(3) {
            position: relative;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }
        }

        .box:nth-child(4) {
            position: relative;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }
        }
    }

    .line:nth-child(5) {
        .box:nth-child(1) {
            position: relative;

            img:nth-child(1) {
                width      : 90%;
                margin-top : 17px;
                margin-left: 18px;
            }

            img:nth-child(2) {
                position : absolute;
                bottom   : 22px;
                right    : -20px;
                transform: rotate(90deg);
                z-index  : 200;
            }
        }

        .box:nth-child(2) {
            position: relative;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }
        }

        .box:nth-child(3) {
            width: 50%;
        }

        .box:nth-child(3) {
            position: relative;

            img:nth-child(1) {
                width      : 90%;
                margin-top : 14px;
                margin-left: 27px;
            }

            img:nth-child(2) {
                position: absolute;
                top     : -25px;
                right   : 150px;

            }
        }
    }

    .line:nth-child(6) {
        .box:nth-child(1) {
            position: relative;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }
        }

        .box:nth-child(2) {
            width   : 50%;
            position: relative;

            img:nth-child(1) {
                width      : 90%;
                margin-top : 13px;
                margin-left: 30px;
            }

            img:nth-child(2) {
                position : absolute;
                right    : -18px;
                bottom   : 40px;
                z-index  : 5;
                transform: rotate(90deg);
            }
        }

        .box:nth-child(3) {
            position: relative;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }
        }
    }

    .line:nth-child(7) {
        .box:nth-child(1) {
            width   : 50%;
            position: relative;

            img:nth-child(1) {
                width      : 90%;
                margin-top : 14px;
                margin-left: 28px;
            }

            img:nth-child(2) {
                position    : absolute;
                left        : 50px;
                top         : -20px;
                // right    : -18px;
                // bottom   : 40px;
                z-index     : 5;
                transform   : rotate(0deg);
                z-index     : 200;
            }
        }

        .box:nth-child(2) {
            position: relative;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }
        }

        .box:nth-child(3) {
            position: relative;
            height  : 20.05vw;

            img:nth-child(1) {
                width      : 90%;
                margin-top : 17px;
                margin-left: 18px;
            }

            img:nth-child(2) {
                position: absolute;
                left    : -20px;
                bottom  : 50px;

                transform: rotate(-90deg);
            }
        }
    }

    .line:nth-child(8) {
        .box:nth-child(1) {
            position: relative;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }

            img {
                position : absolute;
                right    : -20px;
                transform: rotate(-90deg);
                bottom   : 50px;
            }
        }

        .box:nth-child(2) {

            img:nth-child(1) {
                margin-top : 17px;
                margin-left: 18px;
                width      : 90%;
            }
        }

        .box:nth-child(4) {
            position: relative;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }
        }
    }

    .line:nth-child(9) {
        .box:nth-child(1) {
            position: relative;
            width   : 25.1%;

            img:nth-child(1) {
                width: 90%;
            }

            img:nth-child(2) {
                position : absolute;
                right    : -20px;
                z-index  : 5;
                bottom   : 50px;
                transform: rotate(90deg);
            }
        }

        .box:nth-child(2) {
            position: relative;
            width   : 24.90%;

            p:nth-child(2) {
                position: absolute;
                right   : 20px;
                bottom  : 20px;
            }
        }

        .box:nth-child(3) {
            position: relative;
            width   : 50%;

            img:nth-child(1) {
                width      : 90%;
                margin-top : 10px;
                margin-left: 33px;
            }

            img:nth-child(2) {
                position: absolute;
                right   : 180px;

                top: -26px;
            }
        }
    }

    .line:nth-child(10) {

        .box {
            outline   : none;
            // outline: solid 1px;
            height    : 18rem;
        }

        /*
         翻页大小
        */
        @w: 6rem;
        @t: 60px;

        .box:nth-child(2) {
            position  : relative;
            border-top: 1px solid #000 !important;


            img:nth-child(1) {
                position: absolute;
                right   : 63px;
                top     : @t;
                width   : @w;
            }

            img:nth-child(2) {
                position: absolute;
                right   : -48px;
                top     : 73px;
                width   : 30%;
                z-index : 5;
            }
        }

        .box:nth-child(3) {
            position  : relative;
            border-top: 1px solid #000 !important;

            img {
                position: absolute;
                left    : 64px;
                top     : @t + 2px;
                width   : @w;
            }
        }

    }



}